<template>
  <div :id="idName" :ref="idName" class="smoke-case-echart"></div>
</template>

<script>
import { formatMaxNum, formatMinNum } from "@/utils/index.js";
export default {
  props: {
    echartData: {},
    idName: {},
  },
  data() {
    return {};
  },
  components: {},
  mounted() {
    // this.echartsInit();
  },
  watch: {
    // idName() {
    //   this.$nextTick(() => {
    //     this.echartsInit();
    //   });
    // },
  },
  beforeDestroy() {},
  methods: {
    echartsInit() {
      var myColor = ["#0151da", "#9f3c59", "#c6af32", "#13af8d", "#7d4f28"];
      console.log(this.echartData, "=this.echartData===========");
      // let yAxisData = {
      //   min1: formatMinNum(Math.min(...this.echartData.data)),
      //   max1: formatMaxNum(Math.max(...this.echartData.data), 2),
      //   min2: formatMinNum(Math.min(...this.echartData.lineData)),
      //   max2: formatMaxNum(Math.max(...this.echartData.lineData), 2),
      // };
      this.$echarts.init(this.$refs[this.idName]).setOption({
        grid: {
          top: "23%",
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.7)",
          borderColor: "rgba(0,0,0,0.8)",
          borderWidth: 0,
          textStyle: {
            color: "#fff",
          },
          axisPointer: {
            type: "shadow",
          },
        },

        xAxis: {
          data: this.echartData.flag,
          type: "category",
          boundaryGap: false,
          axisLabel: {
            interval: 0,
            show: true,
            textStyle: {
              color: "rgba(255, 255, 255,.8)",
              fontSize: 12,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#395f88",
            },
          },
          axisTick: {
            show: true,
          },
          splitLine: {
            show: false,
          },
        },
        label: {
          show: false,
          color: "#FFF",
        },
        yAxis: [
          {
            type: "value",
            name: "卷烟数量（万支）",
            nameTextStyle: {
              fontSize: 10,
              color: "#fff",
              align: "left",
              padding: [0, 0, 0, -30],
            },
            //             min:yAxisData.min1,
            // max: yAxisData.max1,
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                color: "rgba(255, 255, 255,.8)",
                fontSize: 12,
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8c8c8c",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#2b3560",
              },
            },
          },
          {
            type: "value",
            name: "案件量(个)",
            nameTextStyle: {
              fontSize: 10,
              color: "#fff",
            },
            // min:yAxisData.min2,
            // max: yAxisData.max2,
            position: "right",
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(255, 255, 255,.8)",
                //fontSize: 18
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8c8c8c",
              },
            },

            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: this.echartData.data,
            name: "卷烟数量（万支）",
            barWidth: 10,
            yAxisIndex: 0,
            label: {
              show: false,
              position: "top",
              color: "#FFF",
              fontSize: "14px",
            },
            itemStyle: {
              normal: {
                barBorderRadius: [11, 11, 0, 0],
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            barWidth: "15%",
            color: "#3fc1c9",
          },
          {
            type: "line",
            data: this.echartData.lineData,
            name: "案件量（个）",
            barWidth: 10,
            // itemStyle: {
            //   normal: {
            //       color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //           offset: 0,
            //           color: '#248ff7'
            //       }, {
            //           offset: 1,
            //           color: '#6851f1'
            //       }]),
            //   barBorderRadius: 11,
            //   }
            // },
            yAxisIndex: 1,
            label: {
              show: false,
              position: "top",
              color: "#FFF",
              fontSize: "14px",
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: "#53C9F8",
              },
            },
            color: "rgba(194, 255, 255,1)",
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.smoke-case-echart {
  width: 100%;
  height: 155px;
  top: 0px;
}
</style>
